import React, { Component } from 'react';
import '../styles/Nav.scss'

class nav extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex:0,
            list: [
                { icon: '',text: '综合' },
                { icon: '',text: '销量' },
                { icon: '',text: '新品' },
                { icon: 'icon-paixu',text: '价格' },
                { icon: 'icon-shaixuan-',text: '筛选' }
            ]
        }
    }
    changeStatus(index){
        this.setState({currentIndex:index})
    }
    render() {

        return (
            <div className='nav'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className={'item '+(this.state.currentIndex==index?'active':'')} key={index} onClick={()=>{this.changeStatus(index)}}>
                                <span>{item.text}</span>
                                <span className={'iconfont '+item.icon}></span>
                            </div>

                        )
                    })
                }
            </div>
        );
    }
}

export default nav;